<template>
	<view>
		<view class="box">
			<!-- 1，红包总个数 -->
			<view class="con ">
				<view class="con-title">
					<text>发给谁</text>
				</view>
				<view class="con-right" @click="showGroups">
					<view class="con-right-text">
						<text>{{sendUserName}}</text>
					</view>
					<view class="con-right-img">
						<image :src="require('@/static/img/common/goMore_1.svg')"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 3，红包总金额 -->
		<view class="box">
			<view class="con">
				<view class="con-title">
					<text>总金额</text>
				</view>
				<view class="con-right">
					<input @input="inputCheck" maxlength="8" v-model="amount" type="digit" placeholder="0.00" />
					<text>元</text>
				</view>
			</view>
		</view>

		<!-- 4，红包提示 -->
		<view class="box">
			<view class="con">
				<view class="con-input">
					<input maxlength="15" @input="changeDetail" placeholder="大吉大利" v-model="detail" />
					<image @click="closeTitle" :src="require('@/static/img/login/clear.svg')"></image>
				</view>
			</view>
		</view>

		<!-- 5，价格提示 -->
		<view class="box">
			<view class="box-price">
				<text class="box-price-unit">￥</text>
				<text class="box-price-amount">{{getPrice(amount)}}</text>
			</view>
		</view>

		<!-- 6，发送按钮 -->
		<view class="box">
			<view @click="clickBoxBtn" v-if="!isCanSend" class="box-btn box-btn-not">
				<text>塞钱进红包</text>
			</view>
			<view @click="clickBoxBtn" v-else class="box-btn box-btn-active">
				<text>塞钱进红包</text>
			</view>
		</view>

		<!-- 7，群聊成员 -->
		<red-user @selectUser="selectUser" :isShowUser="isShowGroupUser" @display="closeGroupUser"
			:groupUsers="groupUserList"></red-user>
	</view>
</template>

<script>
	import {
		handlePrice
	} from '@/utils/price.js'

	import {
		queryGroupUsers
	} from '@/api/http/msg/group.js'

	import redUser from './red-user.vue'

	export default {
		components: {
			redUser
		},
		props: {
			groupId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				pkgNum: 1,
				detail: '',
				amount: '',

				isCanSend: false,
				sendUserName: '选择发送对象',
				selectSendUser: {},
				isShowGroupUser: false,
				groupUserList: []
			}
		},
		methods: {
			//1，清空提示
			closeTitle() {
				this.detail = ''
			},
			//2，价格处理
			getPrice(price) {
				return handlePrice(price)
			},
			//3，金额只能保留到两位数
			inputCheck(e) {
				//正则表达试
				e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				//重新赋值给input
				this.$nextTick(() => {
					this.amount = e.target.value;
				});

				var result = this.parameterCheck()
				if (result.boo) {
					this.isCanSend = true
				} else {
					this.isCanSend = false
				}

			},
			//4，总个数切换
			changePkgNum() {
				if (this.pkgNum != '' && this.pkgNum != null && this.pkgNum > this.allUsers) {
					this.$emit('isShowTop', true)
				} else {
					this.$emit('isShowTop', false)
				}

				var result = this.parameterCheck()
				if (result.boo) {
					this.isCanSend = true
				} else {
					this.isCanSend = false
				}
			},
			//5，红包描述
			changeDetail(e) {
				var deatil = e.target.value

				var result = this.parameterCheck()
				if (result.boo) {
					this.isCanSend = true
				} else {
					this.isCanSend = false
				}
			},

			//6，参数校验
			parameterCheck() {
				var result = {
					boo: true,
					text: ''
				}
				if (this.amount == '' || this.amount == null) {
					result.text = '请输入合理红包金额'
					result.boo = false
				} else if (parseFloat(this.amount) < 0.01) {
					result.text = '单个红包不能少于0.01元'
					result.boo = false
				} else if (parseFloat(this.amount) > 2000) {
					result.text = '单个红包不能多于2000元'
					result.boo = false
				} else if (this.sendUserName == '选择发送对象' || JSON.stringify(this.selectSendUser) == "{}") {
					result.text = '请选择发送对象'
					result.boo = false
				}

				return result;
			},

			//7，点击塞钱红包
			clickBoxBtn() {
				var result = this.parameterCheck()
				if (!result.boo) {
					return uni.$showMsg(result.text);
				}

				var hbMsg = {
					amount: parseFloat(this.amount),
					title: this.detail || '大吉大利',
					hbType: '3',
					num: this.pkgNum,
					appointUserId: this.selectSendUser.userId,
					appointUserName: this.selectSendUser.nickname
				}
				this.$emit('sendHbMsg', hbMsg)
			},

			//8，群聊选择成员
			showGroups() {
				queryGroupUsers(this.groupId, '', '', '1').then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					this.groupUserList = res.data.busInfo
					this.isShowGroupUser = true
				})

			},
			closeGroupUser() {
				this.isShowGroupUser = false
			},
			selectUser(item) {
				//console.log(item)
				this.sendUserName = item.nickname
				this.selectSendUser = item
				this.isShowGroupUser = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		margin-bottom: 40rpx;

		.box-price {
			text-align: center;
			padding: 30rpx 0;

			.box-price-unit {
				font-size: 30rpx;
			}

			.box-price-amount {
				font-size: 50rpx;
			}
		}

		.box-btn {
			width: 50%;
			margin-left: 25%;
			height: 90rpx;

			text-align: center;
			line-height: 90rpx;
			border-radius: 50rpx;

			text {
				color: #fff;
				font-size: 32rpx;
			}
		}

		.box-btn-not {
			background-color: #D5D5D5;
			//background-color: #F85351;
		}

		.box-btn-active {
			background-color: #F85351;

			&:active {
				background-color: #DD4A4D;
			}
		}
	}

	.con {
		display: flex;
		justify-content: space-between;
		width: 86%;
		margin-left: 3%;
		height: 90rpx;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 10rpx 4%;

		.con-title {
			flex: 1;
			line-height: 90rpx;
			display: flex;

			view {
				line-height: 90rpx;

				text {
					font-size: 32rpx;
				}
			}

			.con-title-pin {
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 50%;
				background-color: #F4E8C2;
				text-align: center;
				margin-top: 15rpx;
				margin-right: 10rpx;

				text {
					font-size: 30rpx;
					color: #C69F56;
				}
			}


		}

		.con-right {
			flex: 1;
			line-height: 90rpx;
			display: flex;
			justify-content: right;

			input {
				text-align: right;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 5rpx;
				margin-right: 10rpx;
				font-size: 32rpx;
			}

			text {
				font-size: 32rpx;
			}
		}

		.con-input {
			display: flex;
			justify-content: space-between;
			width: 100%;

			input {
				width: 100%;
				height: 80rpx;
				margin-top: 5rpx;
				line-height: 80rpx;
				font-size: 32rpx;
			}

			image {
				margin-left: 15rpx;
				width: 46rpx;
				height: 46rpx;
				margin-top: 22rpx;
			}
		}

		// .con-close {
		// 	image {
		// 		width: 46rpx;
		// 		height: 46rpx;
		// 		margin-top: 22rpx;
		// 	}
		// }

		.con-right-text {
			line-height: 100rpx;

			text {
				font-size: 28rpx;
				color: rgba(166, 166, 166, 1);
			}
		}

		.con-right-img {
			image {
				width: 40rpx;
				height: 40rpx;
				margin-top: 30rpx;
			}
		}

	}

	.con-tips {
		padding: 10rpx 0;

		text {
			font-size: 22rpx;
			color: #D1D1D1;
			margin-left: 30rpx;
		}
	}
</style>